<template>

  <div id="app" class="container" >
    <h3>{{title}}：</h3>
    <br><br><br>
    <form class="form-horizontal" v-show="bl">
      <div class="form-group">
        <label for="titleOfArticle" class="col-sm-1 control-label">标题</label>
        <div class="col-sm-11">
          <textarea id="titleOfArticle" class="form-control" rows="1" v-model="titleOfArticle"></textarea>
        </div>
      </div>

      <div class="form-group">
        <label for="content" class="col-sm-1 control-label">内容</label>
        <div class="col-sm-11">
          <textarea id="content" class="form-control" rows="3" v-model="content"></textarea>
        </div>
      </div>
      <button type="button" class="btn btn-success col-sm-1 col-sm-push-9" @click="add" >发布</button>
      <button type="button" class="btn btn-danger col-sm-1 col-sm-push-10" @click="back" >返回</button>
    </form>
    <form class="form-horizontal" v-show="!bl">
      <div class="form-group">
        <label class="col-sm-1 control-label">修改：</label>
        <div class="col-sm-11">
          <textarea class="form-control" rows="3" v-model="changeContent"></textarea>
        </div>
      </div>
      <button type="button" class="btn btn-success col-sm-1 col-sm-push-11" @click="confirm">确认修改</button>
    </form>
  </div>

</template>

<script>
import axios from "axios";

export default {
name: "ArticleListMain",


  data(){
  return{
    title:'留言板',
    pId:'',
    titleOfArticle:'',
    content:'',
    //下面两个是从studentLogin来的sessionstorage
    author:'',
    author_id:'',
    updateTime:"",
    query:'',//查询的内容
    changeContent:'',//修改后的数据
    bl:true,
    // list:[
    //   {id:1,nikename:"笑话",content:'今天天气真好',date:'2020-02-27-18:06'},
    //   {id:2,nikename:"小草",content:'是呀，那咱们出去晒太阳吧',date:'2020-02-26-18:06'}
    // ]
  }},

  created() {
    this.author_id = sessionStorage.getItem('sno')
    this.author =  sessionStorage.getItem('stuName')
  // this.getParams()

  },
  methods:{

    add() {
      if(this.titleOfArticle == '')
      {
        this.$notify.error({
          title: '错误',
          message: '文章标题不能为空！请输入内容'
        });
      }
      if(this.titleOfArticle != '') {
        this.$message({
          message: '恭喜你，发布成功！',
          type: 'success'
        });
        var _this = this
        const nowDate = new Date();
        const date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          date: nowDate.getDate(),
          hour: nowDate.getHours(),
          minute: nowDate.getMinutes(),
          second: nowDate.getSeconds(),
        }
        const newmonth = date.month > 10 ? date.month : '0' + date.month
        const day = date.date > 10 ? date.date : '0' + date.date
        const second = date.hour + ':' + date.minute + ':' + date.second
        const hh = date.hour < 10 ? '0' + date.hour : date.hour
        const mm = date.minute < 10 ? '0' + date.minute : date.minute
        const ss = date.second < 10 ? '0' + date.second : date.second
        _this.updateTime = date.year + '-' + newmonth + '-' + day + ' ' + hh + ':' + mm + ':' + ss

        var formData1 = new FormData();
        formData1.append("aName", _this.author)
        formData1.append("userId", _this.author_id)
        formData1.append("title", _this.titleOfArticle)
        formData1.append("aContent", _this.content)
        formData1.append("publishData", _this.updateTime)
        axios.post('http://localhost:8080/jas/sport/article/addArticle', formData1).then(function (resp) {
          if (resp.data != null && resp.data != '') {
            _this.pId = resp.data
          }
        }).catch(function (error) {
          //当出现500时（因为是根据输入的用户名和密码执行sql,可能出现空指针异常）
          _this.isShow = true
        })
      }

      // this.list.push({
      //   id: this.list.length + 1,
      //   nikename: this.nikename,
      //   content: this.content,
      //   date:this.getdate()
      // })
      // this.nikename='';
      // this.content='';
    },

    del(index,id){
      this.list.splice(index,1)
    },

    clear(){
      this.list = [];//不可直接将数组长度设为零,这是非响应式的操作
    },

    back(){
      this.$router.push('/StudentMainPage/ArticleList')
    },

    checkPre(index,id){
      this.bl = !this.bl;
      this.nikename = this.list[index].nikename;
    },
    confirm(){
      this.list.forEach(function(item,index){
        if(item.nikename == vm.nikename){
          item.content = vm.changeContent;
          item.date = vm.getdate();
        }
      })
      this.bl = !this.bl;
      vm.nikename='';
    },



    // computed:{
    //   search(){
    //     let result = [];
    //     this.list.forEach((item,index)=>{
    //       if(item.nikename.includes(this.query) || item.content.includes(this.query)){
    //         result.push(item)
    //       }
    //     })
    //     return result;
    //   },
    // },
  },

  watch:{
    //监测路由变化，只要变化了就调用获取路由参数方法将数据存储本组件即可
    '$route':'getParams'
  },


}

</script>

<style  lang="scss" scoped>

</style>


